/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../mixins/input.less';
@import '../mixins/common.less';
@import '../custom.less';
@import './vars.less';
@import '../transition/search-line.less';
@import '../transition/icon.less';

@search-prefix-cls: ~'@{css-prefix}search';

.@{search-prefix-cls} {
  .component-css-vars-search();

  position: relative;
  display: inline-block;
  font-size: var(--ti-search-font-size);
  width: 100%;

  & &__line {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--ti-search-input-height);
    border: 1px solid var(--ti-search-input-border-color);
    border-radius: var(--ti-search-input-border-radius);
    background-color: var(--ti-search-input-bg-color);
    transition: 0.4s;
    border-collapse: separate;

    &:hover {
      border-color: var(--ti-search-line-hover-border-color);
    }

    &.focus,
    &:focus {
      border-color: var(--ti-search-input-focus-border-color);
    }
  }

  & &__input {
    flex: 1;
    height: 100%;
    width: 0;
    font-size: var(--ti-search-font-size);
    line-height: 1;

    color: var(--ti-search-input-text-color);
    padding: 0 0 0 var(--ti-search-input-padding-left);
    border: 0;
    outline: none;
    background: transparent;
    .placeholder(@color: var(--ti-search-input-placeholder-color));

    &:focus {
      .placeholder(@color: var(--ti-search-input-placeholder-color));
    }
  }

  & &__input-btn {
    text-align: center;

    a {
      position: relative;
      text-decoration: none;
      display: block;
      width: var(--ti-search-input-btn-width);
      height: var(--ti-search-input-height);
      line-height: var(--ti-search-input-height);
    }

    svg {
      position: absolute;
      top: 50%;
      right: var(--ti-search-input-btn-icon-position-right);
      transform: translateY(-50%);
      fill: var(--ti-search-input-btn-icon-color);
      font-size: var(--ti-search-input-btn-icon-size);
    }

    &:hover svg {
      fill: var(--ti-search-input-btn-hover-icon-color);
    }
  }

  & &__prefix {
    display: flex;
    align-items: center;
    svg {
      margin: 0 var(--ti-search-input-left-svg-margin-right) 0 var(--ti-search-input-left-svg-margin-left);
      font-size: var(--ti-search-input-btn-icon-size);
      fill: var(--ti-search-input-btn-icon-color);
    }
  }

  & &__present {
    display: flex;
    align-items: center;
    min-width: var(--ti-search-selector-width);
    color: var(--ti-search-selector-text-color);
    line-height: var(--ti-search-size-height-normal);
    padding-left: var(--ti-search-input-padding-left);
    white-space: nowrap;

    .@{search-prefix-cls}__text {
      flex: 1;
      display: inline-block;
    }

    .icon-outer {
      height: calc(var(--ti-search-size-height-normal) - 12px);
      line-height: calc(var(--ti-search-size-height-normal) - 12px);
      display: flex;
      align-items: center;
      padding: 0 8px 0 4px;
      border-right: 1px solid var(--ti-search-input-border-color);
      cursor: pointer;

      svg {
        font-size: var(--ti-search-input-btn-icon-size);
        fill: var(--ti-search-icon-color);
      }
    }
  }

  & &__selector {
    position: absolute;
    top: var(--ti-search-input-height);
    left: 0;
    overflow: hidden;
    min-width: var(--ti-search-selector-box-min-width);
    border: 1px solid var(--ti-search-input-border-color);
    border-radius: var(--ti-search-selector-border-radius);
    font-size: var(--ti-search-font-size);
    box-shadow: var(--ti-search-selector-box-shadow);
    background: var(--ti-search-selector-bg-color);
    color: var(--ti-search-selector-text-color);
    margin-top: var(--ti-search-selector-margin-top);
  }

  & &__selector-body {
    max-height: var(--ti-search-selector-max-height);
    overflow-y: auto;
    overflow-x: hidden;
  }

  & &__poplist-item {
    min-height: var(--ti-search-selector-list-height);
    padding: 0 var(--ti-search-selector-list-padding-horizontal);
    line-height: var(--ti-search-selector-list-height);
    max-width: 100%;
    font-size: var(--ti-search-font-size);
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover {
      background: var(--ti-search-list-hover-bg-color);
      cursor: pointer;
    }

    span {
      font-size: var(--ti-search-font-size);
    }

    .icon-check {
      font-size: var(--ti-common-font-size-2);

      &:hover {
        color: var(--ti-search-input-btn-hover-icon-color);
      }
    }
  }

  &.mini &__line {
    border-radius: var(--ti-search-input-height);
    width: 100%;
    float: right;
  }

  &.mini.collapse &__input-btn {
    a {
      width: var(--ti-search-mini-width);

      svg {
        fill: var(--ti-search-icon-color);
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  &.mini &__input {
    border-radius: var(--ti-search-input-height);
  }

  &.mini.collapse {
    visibility: visible;
  }

  &.collapse &__input {
    padding: 0;
    width: var(--ti-search-size-height-normal);
    float: right;
  }

  &.mini.collapse &__line {
    width: var(--ti-search-mini-width);
    float: right;
    background-color: transparent;
    border-collapse: separate;
  }

  &.mini.collapse &__present,
  &.mini.collapse &__input {
    display: none;
  }

  .fade-enter-to {
    opacity: 0;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
}
